<template>
    <div class="mainBox">
        <p>我的粉丝：
            <span>{{totalFans}}</span>
        </p>
        <div class="fansBox">
            <div class="everyFans"  v-for="item in fansArr" :key="">
                <img :src="item.headPortrait" alt="">
                <span class="nickl">{{item.nickname}}</span>
                <button class="btn">已关注</button>
            </div>

        </div>
    </div>
</template>
<script>
import Service from "@/service/service";
export default {
  data() {
    return {
      detail: {
        creatTime: ""
      },
      totalFans:'',
      fansArr:[]
    };
  },
  created() {
    let _this = this;
    let data = {
      extra: {},
      keyword: "",
      orderBy: "",
      pageNo: "1",
      pageSize: "5",
      param: {
        userId: 29,
        pageNo: "1",
        pageSize: "5",
        type: "post"
      },
      password: "string",
      userId: "19"
    };
    Service.myAjax(
      {
        method: "post",
        url: Service.baseUrl + "/user/fans",
        data: data
      },
      function(response) {
        debugger
        _this.fansArr = response.data.data.list;
        _this.totalFans = response.data.data.list.length;
      },
      function(error) {}
    );
  }
};
</script>
<style lang="scss" scoped>
.mainBox {
  width: 1180px;
  border: 1px solid #dedede;
  padding: 30px 0 0 20px;
  p {
    margin-bottom: 15px;
  }
  .fansBox {
    display: flex;
    height: 300px;
    flex-direction: row;
    flex-wrap: wrap;
    //   justify-content: center;
    .everyFans {
      width: 220px;
      height: 80px;
      line-height: 80px;
      margin-left: 30px;
      overflow: hidden;
      border: 1px solid #dedede;
      img {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        margin-left: 10px;
      }
      .nickl {
        font-size: 16px;
        margin-left: 10px;
      }
      .btn {
        width: 60px;
        height: 35px;
        font-size: 18px;
        border: 1px solid #dedede;
        margin-left: 30px;
        background: #ffffff;
      }
    }
  }
}
</style>

